<template>
<!--热门博客页按钮-->
  <el-row class="tac" style="width:60%;margin: 0 auto">
    <el-col span="4" style="position:fixed;left: 13%">
      <el-menu
          :default-active=this.group_index
          class="el-menu-vertical-demo">
<!-- 热门主页   -->
        <el-menu-item index="2-1" @click="home('热门','2-1')">
          <i class="el-icon-sunny"></i>
          <span slot="title" >热门微博</span>
        </el-menu-item>
<!-- 热门话题 -->
        <el-menu-item index="2-2" @click="home('话题','2-2')">
          <i class="el-icon-document"></i>
          <span slot="title" >话题榜</span>
        </el-menu-item>
      </el-menu>
    </el-col>

<!--博客子组件-->
    <el-col span="15" style="margin-left: 15.8%">
      <router-view :blogIDList="blogIDList"/>
    </el-col>

<!--热搜榜-->
    <el-col span="5" style="position:fixed;left: 66.8%">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>热搜榜</span>
        </div>
        <div v-for="user in 5">
          <div>
            <span style="position:relative;">话题</span>
            <span style="position:relative;">（点赞数）</span>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {getHot} from "@/api/api";
import {getSession} from "@/utils/Token";
import {setSession} from "@/utils/Token";

export default {
  name: "heat_main",
  data(){
    return{
      /*选择的标题*/
      group_index:'2-1',
      blogIDList:[],
    };
  },
  methods:{
    /*热门--话题---跳转*/
    home(select,index,){
      setSession("title1",select);
      let str = select + '-全部';
      setSession("group_index",index);
      setSession("title",str);
      setSession("activeIndex",'1-1-1');
      if(select != '话题'){
        if(this.$route.path != '/heat') {
          getHot(str).then((res)=>{
            if(res.data.status === 200){
              this.blogIDList = res.data.data;
            }
          })
          this.$router.push('/heat');
        }
      }else {
        if(this.$route.path != '/heat/topic') {
          this.$router.push('/heat/topic');
        }
      }
    },
  },
  /*挂载，对于选择框的位置进行校正*/
  mounted() {
    this.group_index = getSession('group_index');
  },
  /*创建时请求博客列表*/
  created() {
    let str;
    if (getSession('title') === null) {
      str = '热门-全部';
    } else {
      str = getSession('title');
    }
    getHot(str).then((res)=>{
      if(res.data.status === 200){
        this.blogIDList = res.data.data;
      }
    })
  }
}
</script>

<style >

</style>